<template>
  <div class="container">
    <div style="border-bottom:1px solid #ccc;padding-bottom:50px">
      <div class="card_title">
        <img src="~@/assets/report/first/baogaodan.png" />
        <span>报告单</span>
      </div>
      <div class="card_content" v-if="status != 1" v-viewer="option">
        <template v-if="img">
          <div v-for="item in img.split(',')" :key="item" style="display: inline-block;">
            <div class="photo" v-if="item">
              <img :src="item" :data-source="item" />
            </div>
          </div>
        </template>
        <j-image-upload
          class="avatar-uploader"
          text="上传"
          v-model="report.reportPictures"
          :is-multiple="true"
          :preview="true"
        ></j-image-upload>
      </div>
      <template v-else>
        <template v-if="img">
          <div class="card_content" v-for="item in img.split(',')" :key="item">
            <img v-if="item" :src="item" style="width:90%;height:80%" />
          </div>
        </template>
        <div class="card_content" v-for="item in report.reportPictures.split(',')" :key="item">
          <img :src="item" style="width:90%;height:80%" />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Report',
  props: ['report', 'img', 'status'],
  data() {
    return {
      images: null,
      option: {
        toolbar: true,
        url: 'data-source'
      }
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
@media print {
  .card_content {
    page-break-after: always;
  }
  .container {
    page-break-after: always;
  }
}
.container {
  padding: 50px 24px 0 24px;
}
.card_title {
  display: flex;
  align-items: center;
  img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
  }
  span {
    font-size: 20px;
    font-weight: bold;
    color: #000;
  }
}
.card_content {
  margin-top: 15px;
  overflow: hidden;
}
.form_item {
  line-height: 50px;
}
.card_label {
  margin-right: 10px;
  color: #000;
}
.card_value {
  color: rgba(0, 0, 0, 0.55);
}
.photo {
  display: inline-block;
  width: 104px;
  height: 104px;
  padding: 8px;
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
}
.photo img {
  width: 100%;
  height: 100%;
}
</style>

